<section class="example-section">
  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
  <mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>
</section>

<section class="example-section">
  <span class="example-list-section">
    <mat-checkbox
      class="example-margin"
      [checked]="task().completed"
      [indeterminate]="partiallyComplete()"
      (change)="update($event.checked)"
    >
      {{task().name}}
    </mat-checkbox>
  </span>
  <span class="example-list-section">
    <ul>
      @for (subtask of task().subtasks; track subtask; let i = $index) {
        <li>
          <mat-checkbox [checked]="subtask.completed" (change)="update($event.checked, i)">
            {{subtask.name}}
          </mat-checkbox>
        </li>
      }
    </ul>
  </span>
</section>
